<template>
    <div class="layout-container">
      <!-- 头部 -->
      <header class="header">
        <div class="logout-btn" @click="handleLogout">退出登录</div>
        <div class="header-content">
          <h1>智慧政务小程序管理控制台</h1>
          <div class="header-right">
            <span class="time">{{ currentTime }}</span>
          </div>
        </div>
      </header>
      
      <!-- 管理菜单卡片 -->
      <div class="menu-grid">
        <div 
          v-for="menu in menuList" 
          :key="menu.path"
          class="menu-item"
          @click="handleMenuClick(menu)">
          <img :src="menu.icon" class="menu-icon" :alt="menu.title">
          <span>{{ menu.title }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAdminStore } from '@/stores/admin.js'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useTokenStore } from '@/stores/token.js'
  import { usePublicStore } from '@/stores/public'
  // 导入所有图标
  import userIcon from '@/assets/css/icons/用户管理.svg'
  import proposalIcon from '@/assets/css/icons/提案管理.svg'
  import proposalProcessIcon from '@/assets/css/icons/提案专项处理.svg'
  import socialInfoIcon from '@/assets/css/icons/社情民意转向处理.svg'
  import socialProcessIcon from '@/assets/css/icons/社情民意专项处理.svg'
  import activityIcon from '@/assets/css/icons/活动管理.svg'
  import meetingIcon from '@/assets/css/icons/会议管理.svg'
  import signIcon from '@/assets/css/icons/签到管理.svg'
  import newsIcon from '@/assets/css/icons/新闻发布.svg'
  import topicIcon from '@/assets/css/icons/主页编辑.svg'
  import rateIcon from '@/assets/css/icons/绩效考察.svg'
  import { useProposalStore } from '@/stores/proposal'

  const router = useRouter()
  const adminStore = useAdminStore()
  const tokenStore = useTokenStore()
  const currentTime = ref('')
  // 操作按钮配置
  const proposalStore = useProposalStore()
  const publicStore = usePublicStore()

  // 菜单配置
  const menuList = [
    { title: '委员管理', path: '/user', icon: userIcon },
    { title: '提案管理', path: '/proposal', icon: proposalIcon },
    { title: '提案专项处理', path: '/proposal-process', icon: proposalProcessIcon },
    { title: '社情民意管理', path: '/public', icon: socialProcessIcon },
    { title: '社情民意专项处理', path: '/public-process', icon: socialInfoIcon },
    { title: '会议管理', path: '/meeting', icon: meetingIcon },
    { title: '签到管理', path: '/sign', icon: signIcon },
    { title: '活动管理', path: '/activity', icon: activityIcon },
    { title: '新闻发布', path: '/news', icon: newsIcon },
    { title: '履职评价', path: '/user/list', icon: rateIcon },
    { title: '主页编辑', path: '/topic', icon: topicIcon },
  ]
  
  // 处理菜单点击
  const handleMenuClick = (menu) => {
    if (menu.permission && !adminStore.hasPermission(menu.permission)) {
      ElMessage.warning('您没有权限访问该页面')
      return
    }
    
    // 如果点击的是提案专项处理菜单
    if (menu.path === '/proposal-process') {
      proposalStore.pageStatus = 301
    }

    // 如果点击的是社情民意专项处理菜单
    if (menu.path === '/public-process') {
      publicStore.pageStatus = 301
    }
    
    router.push(menu.path)
  }
  
  // 更新时间
  const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    
    currentTime.value = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
  }
  
  // 退出登录
  const handleLogout = () => {
    ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 清除token
      tokenStore.removeToken()
      // 清除管理员信息
      adminStore.clearAdminInfo()
      // 跳转到登录页
      router.push('/login')
      ElMessage.success('已安全退出登录')
    }).catch(() => {
      // 取消退出，不做任何操作
    })
  }
  
  onMounted(() => {
    updateTime()
    // 每秒更新时间
    setInterval(updateTime, 1000)
  })
  </script>
  
  <style scoped>
@import '@/assets/css/layout.css';

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.menu-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logout-btn {
  font-family: "微软雅黑";
  font-size: 16px;
  color: #c62828;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s;
  border: 1px solid #c62828;
  background-color: #fff;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.logout-btn:hover {
  background-color: #c62828;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
</style>